<template>
  <div class="view-account">
    <div class="view-account-header"></div>
    <div class="view-account-container">
      <div class="view-account-top">
        <div class="view-account-top-logo">
          <img src="~@/assets/images/account-logo.png" alt="" />
        </div>
        <div class="view-account-top-desc">Naive Ui Admin中台前端/设计解决方案</div>
      </div>
      <div class="view-account-form">
        <span style=" display: block;font-weight: bold;font-size: 16px;margin-bottom: 2vh;">忘记密码?</span>
        <n-tabs default-value="findByMobile" size="large" justify-content="space-evenly" @update:value="changeTab">
          <n-tab-pane name="findByMobile" tab="短信验证码找回">
            <n-form
              ref="mobileFormRef"
              label-placement="left"
              size="large"
              :model="formInline"
              v-if="tabName=='findByMobile'"
              :rules="mobileFormRules"
            >
              <n-form-item path="mobile">
                <n-input v-model:value="formInline.mobile" placeholder="请输入手机号码">
                  <template #prefix>
                    <n-icon size="18" color="#808695">
                      <PersonOutline />
                    </n-icon>
                  </template>
                </n-input>
              </n-form-item>
              <n-form-item path="smsCode">
                <n-input
                  v-model:value="formInline.smsCode"
                  placeholder="请输入短信验证码"
                >
                  <template #prefix>
                    <n-icon size="18" color="#808695">
                      <MailOutline />
                    </n-icon>
                  </template>
                </n-input>
                <n-button style="margin-left: 5px;" :disabled="btnDisabled" @click="sendMsgCode">{{btnText}}</n-button>
              </n-form-item>
              <n-form-item path="password">
                <n-input
                  v-model:value="formInline.password"
                  type="password"
                  show-password-toggle
                  placeholder="请输入密码"
                >
                  <template #prefix>
                    <n-icon size="18" color="#808695">
                      <LockClosedOutline />
                    </n-icon>
                  </template>
                </n-input>
              </n-form-item>
              <n-form-item path="confirmPass">
                <n-input
                  v-model:value="formInline.confirmPass"
                  type="password"
                  show-password-toggle
                  placeholder="请再次输入密码"
                >
                  <template #prefix>
                    <n-icon size="18" color="#808695">
                      <LockClosedOutline />
                    </n-icon>
                  </template>
                </n-input>
              </n-form-item>
            </n-form>
          </n-tab-pane>
          <n-tab-pane name="findByEmail" tab="邮箱找回">
            <n-form
              ref="emailFormRef"
              label-placement="left"
              size="large"
              v-if="tabName=='findByEmail'"
              :model="formInline"
              :rules="emailFormRules"
            >
              <n-form-item path="email">
                <n-input v-model:value="formInline.email" placeholder="请输邮箱地址">
                  <template #prefix>
                    <n-icon size="18" color="#808695">
                      <PersonOutline />
                    </n-icon>
                  </template>
                </n-input>
              </n-form-item>
              <n-form-item path="code">
                <n-input
                  v-model:value="formInline.code"
                  placeholder="请输邮箱验证码"
                >
                  <template #prefix>
                    <n-icon size="18" color="#808695">
                      <MailOutline />
                    </n-icon>
                  </template>
                </n-input>
                <n-button style="margin-left: 5px;" :disabled="btnDisabled" @click="getEmailCode">{{emailText}}</n-button>
              </n-form-item>
              <n-form-item path="password">
                <n-input
                  v-model:value="formInline.password"
                  type="password"
                  show-password-toggle
                  placeholder="请输入密码"
                >
                  <template #prefix>
                    <n-icon size="18" color="#808695">
                      <LockClosedOutline />
                    </n-icon>
                  </template>
                </n-input>
              </n-form-item>
              <n-form-item path="confirmPass">
                <n-input
                  v-model:value="formInline.confirmPass"
                  type="password"
                  show-password-toggle
                  placeholder="请再次输入密码"
                >
                  <template #prefix>
                    <n-icon size="18" color="#808695">
                      <LockClosedOutline />
                    </n-icon>
                  </template>
                </n-input>
              </n-form-item>
            </n-form>
          </n-tab-pane>
        </n-tabs>
        <n-grid :cols="1">
          <n-gi :span="1">
            <n-button type="primary" size="large" block @click="submitForm" :loading="submitLoading" :disabled="submitLoading">
              重置密码
            </n-button>
          </n-gi>
        </n-grid>
        <router-link to="/login">
          <n-button text type="info">
            <template #icon>
              <n-icon>
                <ArrowBackOutline/>
              </n-icon>
            </template>
            返回
          </n-button>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import {defineComponent,ref,reactive} from 'vue'
import { PersonOutline, LockClosedOutline, ArrowBackOutline,MailOutline } from '@vicons/ionicons5';
import { useMessage } from 'naive-ui';
import {useRouter} from 'vue-router'
import {sendSmsCode,sendEmailCode,findPassByEmail,findPassByMobile} from "../../api/system/user";
export default defineComponent({
  name: "FindPwd",
  components:{
    PersonOutline,
    LockClosedOutline,
    MailOutline,
    ArrowBackOutline
  },
  setup(){
    const formInline=reactive({
      mobile:'',
      smsCode: '',
      password:'',
      confirmPass:'',
      code:'',
      email:''
    });
    const router=useRouter();
    const tabName=ref('findByMobile');
    const count=ref(60);
    const emailCount=ref(60);
    const btnDisabled=ref(false);
    const emailBtnDisabled=ref(false);
    const btnText=ref('获取验证码');
    const emailText=ref('获取验证码');
    const message = useMessage();
    const submitLoading=ref(false);
    const mobileFormRef=ref();
    const emailFormRef=ref();
    const downMobileCount=()=>{
      if(count.value==0){
        btnText.value='获取验证码';
        btnDisabled.value=false;
        count.value=60
        return ;
      }else{
        btnText.value=count.value+"秒后重试"
        count.value--;
        btnDisabled.value=true;
      }
      setTimeout(()=>{
        downMobileCount();
      },1000);
    };
    const downEmailCount=()=>{
      if(emailCount.value==0){
        emailText.value='获取验证码';
        emailBtnDisabled.value=false;
        emailCount.value=60
        return ;
      }else{
        emailText.value=emailCount.value+"秒后重试"
        emailCount.value--;
        emailBtnDisabled.value=true;
      }
      setTimeout(()=>{
        downEmailCount();
      },1000);
    };
    const mobileFormRules={
      mobile:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请输入手机号码'))
            }else{
              const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
              if(!reg.test(value)){
                reject(Error('手机号码不正确'))
              }else{
                resolve()
              }
            }
          })
        }
      },
      smsCode:{required:true,message:'请输入短信验证码',trigger: 'blur'},
      password:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请输入密码'))
            }else if(value.length<8){
              reject(Error('密码最少为8位'))
            }else{
              resolve()
            }
          })
        }
      },
      confirmPass:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请再次输入密码'))
            }else if(value.length<8){
              reject(Error('密码最少为8位'))
            }else if(formInline.password!=value){
              reject(Error('两次输入的密码不一致'))
            }else{
              resolve()
            }
          })
        }
      }
    }
    const emailFormRules={
      email:{required:true,message:'请输入邮箱地址',trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            const regEmail=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(value==null) {
              reject(Error('请输入邮箱'))
            }else if(!regEmail.test(value)){
              reject(Error('邮箱格式不正确'))
            }else{
              resolve()
            }
          })
        }
      },
      code:{required:true,message:'请输入邮箱验证码',trigger: 'blur'},
      password:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请输入密码'))
            }else if(value.length<8){
              reject(Error('密码最少为8位'))
            }else{
              resolve()
            }
          })
        }
      },
      confirmPass:{required:true,trigger:'blur',
        validator: (rule, value) => {
          return new Promise((resolve, reject) => {
            if(value==''){
              reject(Error('请再次输入密码'))
            }else if(value.length<8){
              reject(Error('密码最少为8位'))
            }else if(formInline.password!=value){
              reject(Error('两次输入的密码不一致'))
            }else{
              resolve()
            }
          })
        }
      }
    };
    const sendMsgCode=()=>{
      if(formInline.mobile==''){
        message.error('请输入手机号码');
        return;
      }
      sendSmsCode(formInline.mobile).then((res)=>{
        if(res){
          message.success('发送成功')
          downMobileCount();
        }
      })
    };
    const getEmailCode=()=>{
      if(formInline.email==''){
        message.error('请输入邮件地址');
        return;
      }
      sendEmailCode(formInline.email).then((res)=>{
        if(res){
          message.success('发送成功')
          downEmailCount();
        }
      })
    };
    const changeTab = (value) => {
      tabName.value=value;
    };
    const submitForm=()=>{
      if(tabName.value=='findByMobile'){
        mobileFormRef.value.validate((errors)=>{
          if(!errors){
            submitLoading.value=true;
            findPassByMobile(formInline).then(res=>{
              if(res){
                submitLoading.value=false;
                router.push({name:'reset-result',query:{account:formInline.mobile}})
              }
            })
          }
        })
      }else if(tabName.value=='findByEmail'){
        emailFormRef.value.validate((errors)=>{
          if(!errors){
            submitLoading.value=true;
            findPassByEmail(formInline).then(res=>{
              if(res){
                submitLoading.value=false;
                router.push({name:'reset-result',query:{account:formInline.email}})
              }
            })
          }
        })
      }
    }
    return {
      formInline,
      tabName,
      btnText,
      btnDisabled,
      mobileFormRules,
      emailFormRules,
      emailText,
      emailBtnDisabled,
      submitLoading,
      mobileFormRef,
      emailFormRef,
      sendMsgCode,
      changeTab,
      submitForm,
      getEmailCode
    }
  }
})
</script>

<style lang="less" scoped>
.view-account {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;

  &-container {
    flex: 1;
    padding: 32px 0;
    width: 384px;
    margin: 0 auto;
  }

  &-top {
    padding: 32px 0;
    text-align: center;

    &-desc {
      font-size: 14px;
      color: #808695;
    }
  }

  &-other {
    width: 100%;
  }

  .default-color {
    color: #515a6e;

    .ant-checkbox-wrapper {
      color: #515a6e;
    }
  }
}

@media (min-width: 768px) {
  .view-account {
    background-image: url('../../assets/images/login.svg');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
  }

  .page-account-container {
    padding: 32px 0 24px 0;
  }
}
</style>
